import {Button, Col, Form, Row, Select, Table} from 'antd'
import React from 'react'
import {useState} from 'react'
import MyDatePicker from './MyDatePicker'

export default function BehaviorInteraction() {
    const [selectedDateString, setSelectedDateString] = useState(null)
    return (
        <>
            <Row>
                <Col span={24}>
                    <Form layout="inline">
                        <Form.Item label="行为选择" name="xw">
                            <Select
                                style={{width: 150}}
                                options={
                                    [
                                        // { label: '1', value: '1' },
                                        // { label: '1', value: '1' }
                                    ]
                                }
                            />
                        </Form.Item>
                        <Form.Item label="时间选择" name="xw">
                            <MyDatePicker
                                selectedDateString={selectedDateString}
                                setSelectedDateString={setSelectedDateString}
                            />
                        </Form.Item>
                        <Form.Item>
                            <Button type="primary" htmlType="submit">
                                查询
                            </Button>
                        </Form.Item>
                    </Form>
                </Col>
                <Col span={24} style={{marginTop: 10}}>
                    <Table
                        rowClassName="ant-table-row"
                        rowKey="id"
                        dataSource={[
                            {
                                id: 1,
                                cn: '收藏',
                                cn1: '北京十佳收费露营地',
                                cn2: '2022-11-20'
                            },
                            {
                                id: 2,
                                cn: '收藏',
                                cn1: '北京最好吃的是三家烤串',
                                cn2: '2023-05-20'
                            },
                            {
                                id: 3,
                                cn: '收藏',
                                cn1: '河北热门景区',
                                cn2: '2023-12-15'
                            },
                            {
                                id: 4,
                                cn: '收藏',
                                cn1: '天津必打卡地',
                                cn2: '2024-01-20'
                            },
                            {
                                id: 5,
                                cn: '收藏',
                                cn1: '新春出游三部曲',
                                cn2: '2024-05-20'
                            },
                            {
                                id: 6,
                                cn: '收藏',
                                cn1: '五一我在高速烤羊肉串',
                                cn2: '2024-05-02'
                            }
                        ]}
                        columns={[
                            {title: '编号', dataIndex: 'id', key: 'id'},
                            {title: '用户行为', dataIndex: 'cn', key: 'cn'},
                            {title: '内容', dataIndex: 'cn1', key: 'cn1'},
                            {title: '参与时间', dataIndex: 'cn2', key: 'cn2'}
                        ]}
                    />
                </Col>
            </Row>
        </>
    )
}
